<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { setTableHeight, setFixedColumnWidth } from '@/common/utils'
import useRoleList,{actionKeys} from './roleList'
import Add from './add.vue'
import Update from './update.vue'

const columns = ref<objType[]>([
	{
		title: '角色名',
		dataIndex: 'roleName',
		key: 'roleName',
		width: 120,
		align: 'center',
	},
	{
		title: '创建者',
		dataIndex: 'creator',
		key: 'creator',
		width: 120,
		align: 'center',
	},
	{
		title: '创建时间',
		dataIndex: 'createdTime',
		key: 'createdTime',
		width: 120,
		align: 'center',
	},
	{
		title: '操作',
		key: 'operation',
		fixed: 'right',
		align: 'center',
		width: 125,
	},
])
const tableHeight = ref<number>()
const addModalVisible = ref(false)
const updateModalVisible = ref(false)
const editRole = ref({} as RoleItem)

const roleList = useRoleList()

onBeforeMount(() => {
	roleList.getList()
})

onMounted(() => {
	setTableHeight({tableHeightRef:tableHeight})
	setFixedColumnWidth([actionKeys.update,actionKeys.delete],columns)
})

function reset() {
	roleList.getList()
}

function handleAdd() {
	addModalVisible.value = true
}
function handleAddModalClose(isSuccess: boolean) {
	addModalVisible.value = false
	if (isSuccess) {
		message.success('新增成功')
	}
}
function handleUpdate(row: RoleItem) {
	editRole.value = row
	updateModalVisible.value = true
}
function handleUpdateModalClose(isSuccess: boolean,updateId:string) {
	updateModalVisible.value = false
	if (isSuccess) {
		message.success('更新成功')
	}
	if(updateId)
	setTimeout(()=>{
        location.reload()
	},1500)
}
async function handleDelete(row: RoleItem) {
	const res = await roleList.deleteItem(row.id as number)
	if (res.code) {
		message.success('删除成功')
	}
}
</script>

<template>
	<div class="roleManage">
		<div class="tableTool">
			<a-button type="primary" style="margin-right: 5px" @click="handleAdd" v-if="$hasAuth([actionKeys.add])">新增角色</a-button>
			<a-button type="primary" @click="reset"><reload-outlined /></a-button>
		</div>
		<a-table :dataSource="roleList.list" :columns="columns" size="small" style="width: 100%" class="myTable" rowKey="name" :scroll="{ x: '100%', y: tableHeight }">
			<template #bodyCell="{ record, column }: any">
				<template v-if="column.key === 'operation'">
					<a-button type="primary" size="small" @click="handleUpdate(record)"  style="margin-right: 5px" v-if="$hasAuth([actionKeys.update])">修改</a-button>
					<a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)" placement="topLeft" v-if="$hasAuth([actionKeys.delete])">
						<a-button type="danger" size="small" style="margin-right: 0px">删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</a-table>

		<Add :visible="addModalVisible"  @close="handleAddModalClose" />
		<Update :visible="updateModalVisible" :editRole="editRole" @close="handleUpdateModalClose" />
	</div>
</template>

<style scoped lang="less">
.roleManage {
	.tableTool {
		padding: 10px 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
